import React, { useState, useRef } from 'react';
import { TextInput, StyleSheet, Button, View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';

const Labels = ['Username', 'Password', 'Firstname', 'Lastname', 'Address', 'Phone', 'Email', 'QQ', 'WeChat', 'Webo'];

export const ScrollToEnd: React.FC = (): JSX.Element => {
    const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
    const [hasScrolled, setHasScrolled] = useState(false);

    return (
        <Tester style={{ paddingBottom: 80 }}>
            <TestSuite name='KeyboardAwareScrollView 滚动测试'>
                <TestCase
                    itShould={`滚动到底部`}
                    tags={['C_API']}
                    initialState={false}
                    arrange={({ setState }) => {
                        return (
                            <KeyboardAwareScrollView
                                ref={scrollViewRef}
                                style={styles.scroll}
                                contentContainerStyle={styles.contentContainer}
                                enableOnAndroid={true}
                                extraHeight={100}
                                extraScrollHeight={60}
                                keyboardOpeningTime={0}
                                keyboardShouldPersistTaps="handled"
                                enableResetScrollToCoords={false}
                            >
                                <Button
                                    title={'滚动到底部'}
                                    onPress={() => {
                                        scrollViewRef.current?.scrollToEnd({ animated: true });
                                        setState(true);
                                        setHasScrolled(true);
                                    }}
                                />
                                <Text style={styles.statusText}>
                                    {hasScrolled ? '已触发滚动!' : '点击按钮测试滚动'}
                                </Text>
                                {Labels.map(item => (
                                    <View key={item} style={styles.inputContainer}>
                                        <Text style={styles.label}>{item}:</Text>
                                        <TextInput 
                                            style={styles.input} 
                                            placeholder='请输入' 
                                            placeholderTextColor="#999"
                                        />
                                    </View>
                                ))}
                            </KeyboardAwareScrollView>
                        );
                    }}
                    assert={async ({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                />
            </TestSuite>
        </Tester>
    );
};

const styles = StyleSheet.create({
    scroll: {
        backgroundColor: '#f0f0f0',
        height: 500, 
    },
    contentContainer: {
        paddingBottom: 100, 
    },
    inputContainer: {
        marginBottom: 20,
        paddingHorizontal: 20,
    },
    label: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 5,
        color: '#333',
    },
    input: {
        width: '100%',
        borderWidth: 1,
        borderColor: '#ccc',
        height: 50,
        borderRadius: 8,
        fontSize: 16,
        paddingHorizontal: 12,
        backgroundColor: '#fff',
    },
    statusText: {
        textAlign: 'center',
        marginVertical: 10,
        fontWeight: 'bold',
        color: '#2196F3',
    },
});

export default ScrollToEnd;